<template>
	<view class="content font_family">
		<view class="title">
			收货信息
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>收件人</text>
			</view>
			<view class="right">
				<u--input :placeholderStyle='{color:"#999999"}' placeholder="请输入您的姓名" border="none"
					v-model="query_data.name"></u--input>
			</view>
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>手机号</text>
			</view>
			<view class="right">
				<u--input :placeholderStyle='{color:"#999999"}' placeholder="请输入您的手机号" border="none"
					v-model="query_data.tel"></u--input>
			</view>
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>所在地区</text>
			</view>
			<view class="right f_z_b f_j" @click="chosse_address">
				<view class="text">
					{{query_data.address?query_data.address:'请选择地址'}}
				</view>
				<image src="../../static/public/go_h.png" mode=""></image>
			</view>
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>详细地址</text>
			</view>
			<view class="right f_z_b f_j">
				<u--textarea placeholderStyle='{color:red}' v-model="query_data.xx_address" height='70rpx' border='none'
					placeholder="请输入内容"></u--textarea>
			</view>
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>标签</text>
			</view>
			<view class="right f_z_b f_j">
				<u-radio-group v-model="query_data.flag" placement="row">
					<u-radio :customStyle="{marginRight:'10px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.type" activeColor='#FA3B3A' @change="radioChange">
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>默认地址</text>
			</view>
			<view class="right f_j">
				<text>否</text>
				<view class="switch_box">
					<u-switch v-model="switch_val" activeColor='#FA3B3A' @change="change"></u-switch>
				</view>
				<text>是</text>
			</view>
		</view>
		<view class="btn" @click="add">
			保存
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	import { addAddress } from '@/api/user.js'
	import mixin from './mixins/check_kong.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				switch_val: false,
				radiolist1: [{
						name: '家',
						type: 1
					},
					{
						name: '公司',
						type: 2
					},
					{
						name: '学校',
						type: 3
					}, {
						name: '其他',
						type: 4
					}
				],
				query_data: {
					name: '',
					tel: '',
					address: '',
					xx_address: '',
					is_default: 0,
					flag: 1
				}
			}
		},
		onLoad(e) {
			if (e.obj) {
				let data = JSON.parse(e.obj)
				this.query_data.name = data.name
				this.query_data.tel = data.tel
				this.query_data.address = data.address
				this.query_data.xx_address = data.xx_address
				this.query_data.flag = data.flag * 1
				this.query_data.is_default = data.is_default
				this.query_data.id = e.id
				if (this.query_data.is_default == 0) {
					this.switch_val = false
				} else {
					this.switch_val = true
				}
			}
		},
		methods: {
			...mapMutations(['set_address_list']),
			radioChange(e) {
				console.log(e, this.query_data)
			},
			change(e) {
				if (e) {
					this.query_data.is_default = 1
				} else {
					this.query_data.is_default = 0
				}
			},
			chosse_address() {
				uni.chooseLocation({
					success: (res) => {
						// console.log(res)
						this.query_data.address = res.address
					}
				})
			},
			add() {
				if (this.address_kong(this.query_data)) {
					return
				}
				addAddress(this.query_data).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							message: res.msg,
							duration: 1500,
							complete: () => {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		background-color: #FFFFFF;

		.title {
			font-weight: 400;
			font-size: 33rpx;
			color: #232323;
		}

		.item {
			margin-top: 30rpx;

			.left {
				width: 200rpx;

				.color {
					color: #FA3B3A;
				}
			}

			.right {
				flex: 1;
				padding: 30rpx;
				// width: 537rpx;
				background: #F9F9F9;
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.text {
					flex: 1;
					color: #000000;
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}

				::v-deep .u-textarea {
					padding: 0rpx;
					background: none;
				}

				.switch_box {
					margin: 0rpx 15rpx;
				}
			}
		}

		.btn {
			margin-top: 300rpx;
			text-align: center;
			padding: 25rpx 0rpx;
			background: #EE4133;
			border-radius: 47rpx 47rpx 47rpx 47rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
</style>